<template>
    <div v-if="!loading && dataSource.list != null && dataSource.list.length == 0">
        <noData :msg="noDataMsg"></noData>
    </div>
    <div
        class="skeleton"
        v-if="loading"
    >
        <el-skeleton
            :row="2"
            animated
        >
        </el-skeleton>
    </div>
    <template v-if="!loading">
        <div
            v-for="item in dataSource.list"
            :key="item.key"
        >
            <slot :data="item"></slot>
        </div>
    </template>

    <div class="pagination">
        <el-pagination
            v-if="dataSource.pageTotal > 1"
            background
            :total="dataSource.totalCount"
            @current-change="handlePageNoChange"
            v-model:currentPage="dataSource.pageNo"
            :default-page-size="dataSource.pageSize"
            layout="prev, pager, next"
            style="text-align: right"
        >

        </el-pagination>

    </div>
</template>

<script setup>
const props = defineProps({
    dataSource: {
        type: Object
    },
    loading: {
        type: Boolean
    },
    noDataMsg: {
        type: String,
        default: "空空如也"
    }
})

const emit = defineEmits(['loadData'])
const handlePageNoChange = (pageNo) => {
    props.dataSource.pageNo = pageNo
    console.log(pageNo);
    emit('loadData')
}
</script>

<style lang="scss" scoped>
.pagination {
    margin: 5px 0 20px 10px;
    padding: 10px 0px 10px 0px;
}

.skeleton {
    padding: 15px;
}
</style>
